<template>
  <div>
    <TopNav title="栏目管理" />
    <div class="enable">
      <div class="title">点击删除以下频道</div>
      <div class="list">
        <div
          class="item"
          @click="disableCategory(index)"
          v-for="(item,index) in enableList"
          :key="index"
        >{{item.name}}</div>
        <!-- <div class="item">热点</div>
        <div class="item">娱乐</div>
        <div class="item">科技</div>
        <div class="item">汽车</div>-->
      </div>
    </div>
    <div class="disable">
      <div class="title">点击添加以下频道</div>
      <div class="list">
        <div
          class="item"
          @click="enableCategory(index)"
          v-for="(item,index) in disableList"
          :key="index"
        >{{item.name}}</div>
        <!-- <div class="item">热点</div>
        <div class="item">娱乐</div>
        <div class="item">科技</div>
        <div class="item">汽车</div>-->
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
export default {
  components: {
    TopNav
  },
  data() {
    return {
      enableList: [],
      disableList: []
    };
  },
  watch: {
    enableList(newList) {
      localStorage.setItem("enableList", JSON.stringify(newList));
    },
    disableList(newList) {
      localStorage.setItem("disableList", JSON.stringify(newList));
    }
  },
  mounted() {
    //先检查localStorage
    if (localStorage.getItem("enableList")) {
      this.enableList = JSON.parse(localStorage.getItem("enableList"));
    }
    if (localStorage.getItem("disableList")) {
      this.disableList = JSON.parse(localStorage.getItem("disableList"));
    }
    if (!localStorage.getItem("enableList")) {
      this.loadCategory();
    }
  },
  methods: {
    loadCategory() {
      this.$axios({
        url: "/category",
        method: "GET"
      }).then(res => {
        console.log(res.data);
        this.enableList = res.data.data;
      });
    },
    disableCategory(index) {
      //判断当前激活栏目的数量不能小于1
      if (this.enableList.length == 1) {
        this.$toast.fail("至少保留一个栏目");
        return;
      }
      console.log(index);
      //将这个索引的元素从已激活列表转移到未激活列表
      //   1.先放到未激活列表
      this.disableList.push(this.enableList[index]);
      //   2.在从已激活列表删除
      this.enableList.splice(index, 1);
    },
    enableCategory(index) {
      // 也是分为上面2步
      this.enableList.push(this.disableList[index]);
      this.disableList.splice(index, 1);
    }
  }
};
</script>

<style lang="less" scoped>
.enable {
  padding: 4.167vw;
  .title {
    color: #939293;
    font-size: 3.611vw;
    padding-bottom: 2.778vw;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      text-align: center;
      padding: 1.389vw 0;
      width: 19%;
      border: 1px solid #939293;
      margin: 2.222vw;
    }
  }
}
.disable {
  padding: 4.167vw;
  .title {
    color: #939293;
    font-size: 3.611vw;
    padding-bottom: 2.778vw;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      text-align: center;
      padding: 1.389vw 0;
      width: 19%;
      border: 0.278vw solid #939293;
      margin: 2.222vw;
    }
  }
}
</style>